<template>
  <div class="policy-manager">
    <div class="policy-header">
      <el-card>
        <el-row :gutter="20">
          <el-col :span="6">
            <div>
              <el-statistic
                group-separator=","
                :value="stat.num"
                title="有效保单数"
              />
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-statistic title="男女比">
                <template slot="prefix">
                  <i
                    class="iconfont icon-a-icon-person-nan2"
                    style="color: blue"
                  />
                </template>

                <template slot="formatter">
                  {{ stat.male }}/{{ stat.female }}
                </template>
                <template slot="suffix">
                  <i class="iconfont icon-nvren" style="color: red" />
                </template>
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-statistic
                group-separator=","
                decimal-separator="."
                :value="stat.amount"
                :precision="4"
                title="投保总金额（万）"
              />
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-statistic :value="stat.currency" title="币种总计">
                <template slot="suffix">
                  <i class="el-icon-money" style="color: #34b57c" />
                </template>
              </el-statistic>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="policy-body">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
      >
        <el-table-column fixed label="生效日期" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ scope.row.effectivedate | getFormatDate }}</span>
          </template></el-table-column>
        <el-table-column prop="insured" label="参保人" width="150" />
        <el-table-column prop="insuredAge" label="参保时年龄" width="150" />
        <el-table-column label="性别" width="150">
          <template slot-scope="scope">
            {{ scope.row.insuredSex === 0 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column prop="insuranceName" label="保险名" width="150" />
        <el-table-column
          prop="insuranceCategory"
          label="保险种类"
          width="150"
        />

        <el-table-column
          prop="totalCost"
          label="合计12个月保险费"
          width="150"
        />
        <el-table-column label="基本保险金额" width="150">
          <template slot-scope="scope">
            {{ scope.row.basicAmount || 0 }}
          </template>
        </el-table-column>
        <el-table-column label="一般医疗补偿金" width="150">
          <template slot-scope="scope">
            {{ scope.row.generalComp || 0 }}
          </template></el-table-column>
        <el-table-column
          prop="substantialComp"
          label="重大疾病补偿金"
          width="150"
        >
          <template slot-scope="scope">
            {{ scope.row.substantialComp || 0 }}
          </template>
        </el-table-column>
        <el-table-column label="币种" width="150">
          <template slot-scope="scope">
            {{ scope.row.currency || '???' }}（{{ scope.row.unit || '???' }}）
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              circle
              @click="handleDel(scope.row.id)"
            />
            <el-button type="primary" icon="el-icon-edit" size="small" circle @click="handleEdit(scope.row)" />
          </template>
        </el-table-column>
      </el-table>

    </div>
    <div class="policy-footer">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.pageNo"
        :limit.sync="listQuery.pageSize"
        @pagination="getList"
      />
    </div>

    <el-drawer
      title="保单编辑"
      :visible.sync="drawer"
      size="50%"
    >
      <el-form ref="form" :model="form" label-width="140px">
        <el-form-item label="参保人名">
          <el-input v-model="form.insured" />
        </el-form-item>
        <el-form-item label="保险名">
          <el-input v-model="form.insuranceName" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.insuredSex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="参保人年龄">
          <el-input v-model="form.insuredAge" />
        </el-form-item>
        <el-form-item label="保险类别">
          <el-select v-model="form.insuranceCategory" placeholder="请选择">
            <el-option label="百万医疗险" value="百万医疗险" />
            <el-option label="高端医疗险" value="高端医疗险" />
            <el-option label="中端医疗险" value="中端医疗险" />
            <el-option label="低额医疗险" value="低额医疗险" />
          </el-select>
        </el-form-item>

        <el-form-item label="币种">
          <el-cascader v-model="form.category" :options="options" clearable />
        </el-form-item>

        <el-form-item label="合计12个月保险费">
          <el-input v-model="form.totalCost" />
        </el-form-item>
        <el-form-item label="一般医疗补偿金">
          <el-input v-model="form.generalComp" />
        </el-form-item>
        <el-form-item label="重大医疗补偿金">
          <el-input v-model="form.substantialComp" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">修改</el-button>
          <el-button @click="drawer=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { getPolicyList, editPolicyList, delPolicyList } from '@/api/policy'
import moment from 'moment'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
import { Decimal } from 'decimal.js'
export default {
  components: {
    Pagination
  },
  directives: {
    waves
  },
  filters: {
    getFormatDate(val) {
      return moment(val).locale('zh-cn').format('YYYY-MM-DD')
    }
  },
  data() {
    return {
      stat: {
        num: 0,
        male: 0,
        female: 0,
        amount: 0,
        currency: 0
      },
      tableData: [],
      tempTableData: [],
      tableLoading: false,
      // 查询字段
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      form: {
        id: 0,
        effectivedate: '',
        insured: '',
        insuranceName: '',
        insuranceCategory: '',
        insuredAge: 0,
        insuredSex: 0,
        category: [],
        basicAmount: 0,
        totalCost: 0,
        generalComp: 0,
        substantialComp: 0
      },
      options: [{
        value: '美元',
        label: '美元',
        children: [{
          value: 'Dollar',
          label: 'Dollar'
        }, {
          value: 'Quarter',
          label: 'Quarter'
        }, {
          value: 'Dime',
          label: 'Dime'
        }, {
          value: 'Nickel',
          label: 'Nickel'
        }, {
          value: 'Cent',
          label: 'Cent'
        }]
      }, {
        value: '人民币',
        label: '人民币',
        children: [{
          value: '千',
          label: '千'
        }, {
          value: '百',
          label: '百'
        }, {
          value: '元',
          label: '元'
        }]
      }, {
        value: '英磅',
        label: '英磅',
        children: [{
          value: 'Pound',
          label: 'Pound'
        }, {
          value: 'Pence',
          label: 'Pence'
        }]
      }
      ],
      drawer: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.tableLoading = true
      const that = this
      getPolicyList(this.listQuery).then(async(res) => {
        // 先将数据全部清空
        that.stat.num = 0
        that.stat.male = 0
        that.stat.female = 0
        that.stat.amount = 0
        that.stat.currency = 0
        // 设置一个
        const t = new Set()
        that.tableData = res.data.rows
        // this.categoryList = res.data.rows;
        that.tempTableData = Array.from(that.tableData)
        that.total = Number(res.data.total)
        // 处理所有数据
        that.stat.num = that.total
        const { data } = await getPolicyList({ pageNo: 1, pageSize: that.stat.num })

        data.rows.forEach(v => {
          // 这里日后修复
          that.stat.amount = new Decimal(that.stat.amount).add(new Decimal(v.totalCost)).toNumber()
          if (v.insuredSex === 0) that.stat.male++
          else that.stat.female++
          t.add(v.currency)
          that.stat.currency = t.size
        })
        setTimeout(() => {
          that.stat.amount = new Decimal(that.stat.amount).div(new Decimal(10000)).toNumber()
          that.tableLoading = false
        }, 500)
      })
    },
    handleClick(row) {
      console.log(row)
    },
    async handleEdit(row) {
      this.form = JSON.parse(JSON.stringify({ ...row, category: [row.currency, row.unit] }))
      this.drawer = true
    },
    async onSubmit() {
      this.drawer = false
      const query = { ...this.form, currency: this.form.category[0], unit: this.form.category[1], effectivedate: moment().format('YYYY-MM-DD HH:mm:ss') }
      const res = await editPolicyList(query)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          message: '修改成功'
        })
        this.getList()
      } else {
        this.$notify({
          type: 'error',
          message: '呜呜呜....出错了'
        })
      }
    },
    async handleDel(id) {
      const res = await delPolicyList(id)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          message: '删除成功'
        })
        this.getList()
      } else {
        this.$notify({
          type: 'error',
          message: '删除失败'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.policy-manager {
  padding: 10px 10px 0;
  .policy-body {
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .policy-footer {
    text-align: center;
  }
}
</style>
